<template>
  <div class="hidden lg:block">
    <OptionBoard
      :optionGroups="optionGroups"
      :x="position.x"
      :y="position.y"
      :isOpen="isOptionBoardOpen"
      @close="isOptionBoardOpen = false"
    />
    <div class="flex items-center justify-between py-3">
      <left-side></left-side>
      <div class="flex items-center">
        <div class="popover-wrapper">
          <buttonIcon
            iconName="upload"
            :title="i18nStore.translate('create_something')"
            iconClass="preview-list-icon vue-feather group-hover-text-theme scale-100"
            @click="toggleOptionBoard('create_something', $event)"
          >
          </buttonIcon>
        </div>
        <div
          @click="flagStore.setSearchBoardOpen(true)"
          class="relative cursor-pointer rounded-lg bg-light-background dark:bg-dark-foreground ml-5 hidden lg:block xl:ml-8 transition-all duration-200 ease-in-out hover:shadow-md dark:hover:shadow-md-dark"
        >
          <div
            class="flex w-56 items-center justify-between px-4 py-2.5 text-left xl:w-64"
          >
            <div class="flex items-center">
              <SvgIcon
                name="search"
                iconClass="vue-feather text-gray-400 dark:text-gray-600 feather feather-search"
              />
              <span
                class="pl-2.5 text-xs font-bold text-gray-400 dark:text-gray-600"
              >
                {{ i18nStore.translate('search_anything') }}
              </span>
            </div>
            <span
              class="rounded border px-1 py-0.5 text-xs font-bold tracking-normal text-gray-400 dark:border-slate-200 dark:border-opacity-5 dark:text-gray-600"
            >
              Ctrl+K
            </span>
          </div>
        </div>
        <div class="ml-5 flex items-center xl:ml-8">
          <div class="flex items-center">
            <buttonIcon
              v-for="(item, index) in iconInfo"
              :key="index"
              :iconName="item.iconName"
              :title="item.title"
              :isInactive="checkInactive(item)"
              @click="item.click ? item.click(item) : () => {}"
            >
            </buttonIcon>
          </div>
        </div>
        <div class="ml-5 flex items-center xl:ml-8">
          <div class="popover-wrapper">
            <buttonIcon
              iconName="menu"
              :title="i18nStore.translate('sort_and_view')"
              @click="toggleOptionBoard('sort_and_view', $event)"
              :isActive="
                isOptionBoardOpen && curOptionBoardType === 'sort_and_view'
              "
            >
            </buttonIcon>
            <buttonIcon
              iconName="warning-filled"
              :title="i18nStore.translate('info_board')"
              @click="toggleInfoBoard"
              :isActive="flagStore.isInfoBoardOpen"
            >
            </buttonIcon>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- mobile -->
  <div
    class="sticky top-0 z-[19] flex w-full items-center justify-between bg-white py-1 px-2 text-center dark:bg-dark-background lg:hidden"
  >
    <!-- <div
      class="sticky top-0 z-[19] block flex w-full items-center justify-between bg-white text-center dark:bg-dark-background lg:hidden"
    >
      <left-side></left-side>
      <div class="relative flex items-center">
        <div class="flex items-center relative mr-[4px]">
          <div class="cursor-pointer p-1.5 -m-1.5">
            <SvgIcon
              name="bars-out-lined"
              iconClass="vue-feather dark:text-gray-100 feather feather-menu"
            />
          </div>
        </div>
      </div>
    </div> -->

    <div class="lg:block w-full">
      <OptionBoard
        :optionGroups="optionGroups"
        :x="position.x"
        :y="position.y"
        :isOpen="isOptionBoardOpen"
        @close="isOptionBoardOpen = false"
      />
      <div class="flex items-center justify-around">
        <left-side></left-side>
        <div class="flex items-center justify-around flex-wrap">
          <div
            @click="flagStore.setSearchBoardOpen(true)"
            class="relative cursor-pointer rounded-lg bg-light-background dark:bg-dark-foreground ml-5 lg:block xl:ml-8 transition-all duration-200 ease-in-out hover:shadow-md dark:hover:shadow-md-dark"
          >
            <div
              class="mobile:hidden flex w-56 items-center justify-between px-4 py-2.5 text-left xl:w-64"
            >
              <div class="flex items-center">
                <SvgIcon
                  name="search"
                  iconClass="vue-feather text-gray-400 dark:text-gray-600 feather feather-search"
                />
                <span
                  class="pl-2.5 text-xs font-bold text-gray-400 dark:text-gray-600"
                >
                  {{ i18nStore.translate('search_anything') }}
                </span>
              </div>
              <span
                class="rounded border px-1 py-0.5 text-xs font-bold tracking-normal text-gray-400 dark:border-slate-200 dark:border-opacity-5 dark:text-gray-600"
              >
                Ctrl+K
              </span>
            </div>
          </div>
          <div class="flex justify-between w-full">
            <div class="flex items-center">
              <div class="flex items-center">
                <buttonIcon
                  v-for="(item, index) in iconInfo"
                  :key="index"
                  :iconName="item.iconName"
                  :title="item.title"
                  :isInactive="checkInactive(item)"
                  @click="item.click ? item.click(item) : () => {}"
                >
                </buttonIcon>
              </div>
            </div>
            <div class="flex items-center">
              <div class="popover-wrapper flex items-center">
                <buttonIcon
                  iconName="menu"
                  :title="i18nStore.translate('sort_and_view')"
                  @click="toggleOptionBoard('sort_and_view', $event)"
                  :isActive="
                    isOptionBoardOpen && curOptionBoardType === 'sort_and_view'
                  "
                >
                </buttonIcon>
                <buttonIcon
                  iconName="warning-filled"
                  :title="i18nStore.translate('info_board')"
                  @click="toggleInfoBoard"
                  :isActive="flagStore.isInfoBoardOpen"
                  customClass="mobile:hidden"
                >
                </buttonIcon>
                <buttonIcon
                  iconName="upload"
                  :title="i18nStore.translate('create_something')"
                  iconClass="preview-list-icon vue-feather group-hover-text-theme scale-100"
                  @click="toggleOptionBoard('create_something', $event)"
                >
                </buttonIcon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  useFlagStore,
  useI18nStore,
  useFileStore,
  SORT_TYPE,
  SORT_ORDER
} from '@/stores';
import { FILE_LIST } from '@/components/fileList/filedsConfig';
import { useRoute } from 'vue-router';

const flagStore = useFlagStore();
const i18nStore = useI18nStore();
const fileStore = useFileStore();
const route = useRoute();

const isOptionBoardOpen = ref(false);
const optionGroups = ref([]);
const position = ref({ x: 0, y: 0 });

const toggleInfoBoard = () => {
  flagStore.toggleFlag('isInfoBoardOpen');
};

const curOptionBoardType = ref('');
const sortAndViewGroups = computed(() => {
  return [
    {
      title: 'view',
      options: [
        {
          type: fileStore.isGridironPlan ? 'list' : 'th-large',
          content: fileStore.isGridironPlan ? 'list_view' : 'grid_view',
          icon: {}
        }
      ]
    },
    {
      title: 'sort',
      options: [
        {
          type: 'calendar',
          content: 'sort_by_date',
          icon:
            fileStore.curSortType === SORT_TYPE.DATE
              ? {
                  type:
                    fileStore.curSortOrder === SORT_ORDER.ASC
                      ? 'arrow-up'
                      : fileStore.curSortOrder === SORT_ORDER.DESC
                      ? 'arrow-down'
                      : ''
                }
              : {}
        },
        {
          type: 'language',
          content: 'sort_by_name',
          icon:
            fileStore.curSortType === SORT_TYPE.FILE_NAME
              ? {
                  type:
                    fileStore.curSortOrder === SORT_ORDER.ASC
                      ? 'arrow-up'
                      : fileStore.curSortOrder === SORT_ORDER.DESC
                      ? 'arrow-down'
                      : ''
                }
              : {}
        }
      ]
    }
  ];
});
const createSomethingGroups = computed(() => {
  const { path } = route;
  if (path === '/mySmallfiles') {
    return [
      {
        title: 'commonly_used',
        options: [
          {
            type: 'upload',
            content: 'upload_files',
            icon: {}
          }
        ]
      }
    ];
  } else if (path === '/myFiles') {
    return [
      {
        title: 'commonly_used',
        options: [
          {
            type: 'upload',
            content: 'upload_files',
            icon: {}
          },
          {
            type: 'folder-open',
            content: 'create_folder',
            icon: {}
          }
        ]
      },
      // 暂时禁用文件夹上传功能
      {
        title: 'others',
        options: [
          {
            type: 'cloud-upload',
            content: 'upload_folder',
            icon: {}
          }
        ]
      }
    ];
  } else {
    return [];
  }
});

const toggleOptionBoard = (type, rect) => {
  curOptionBoardType.value = type;
  switch (type) {
    case 'sort_and_view':
      isOptionBoardOpen.value = !isOptionBoardOpen.value;
      optionGroups.value = sortAndViewGroups.value;
      position.value = {
        x: rect.x - 240 + rect.width,
        y: rect.y + rect.height
      };
      break;
    case 'create_something':
      isOptionBoardOpen.value = !isOptionBoardOpen.value;
      optionGroups.value = createSomethingGroups.value;
      position.value = {
        x: rect.x - 240 + rect.width,
        y: rect.y + rect.height
      };
      break;
    default:
      break;
  }
};

const checkInactive = (item) => {
  // 暂时禁用团队文件夹和移动功能，等待后端接口
  if (item.title === 'transform_to_team_folder' || item.title === 'move') {
    return true;
  }
  // 暂时禁用文件夹分享功能，等待后端接口
  if (
    (item.title === 'share_item' &&
      fileStore.checkIsFolder(fileStore.curFileInfo)) ||
    route.path === '/trash'
  ) {
    return true;
  }

  if (item.title === 'transform_to_team_folder') {
    return !fileStore.checkIsFolder(fileStore.curFileInfo);
  }

  if (item.title === 'delete' && route.path === '/mySharedItems') {
    return true;
  }

  return !(
    fileStore.checkIsFolder(fileStore.curFileInfo) ||
    fileStore.checkIsFile(fileStore.curFileInfo)
  );
};

const iconInfo = reactive([
  {
    title: 'transform_to_team_folder',
    iconName: 'team'
  },
  {
    title: 'share_item',
    iconName: 'share',
    click: () => {
      flagStore.setShareBoardOpen(true);
    }
  },
  {
    title: 'move',
    iconName: 'move'
  },
  {
    title: 'delete',
    iconName: 'delete',
    click: () => {
      fileStore.deleteFile(fileStore.curFileInfo, 1);
    }
  }
]);

const keyboardShotcutForSearch = (e) => {
  if (e.ctrlKey && e.key === 'k') {
    e.preventDefault();
    flagStore.setSearchBoardOpen(true);
  }
};

onMounted(() => {
  // 监听搜索快捷键
  window.addEventListener('keydown', keyboardShotcutForSearch);
});
onUnmounted(() => {
  window.removeEventListener('keydown', keyboardShotcutForSearch);
});
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
